<template>
  <div class="root-router-vw">
    <template v-for="(item, idx) in rootRoutes">
      <div v-if="item.meta && item.meta.isRoot" :key="idx" class="name-vw" :class="{actived: item.meta.acIdx == acIdx}" @click="changeRoot(idx)">
        {{ item.meta.title }}
      </div>
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'RootRouter',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      index: -1
    }
  },
  computed: {
    ...mapGetters([
      'acIdx'
    ]),
    rootRoutes() {
      const oldList = this.$router.options.routes
      const list = []
      oldList.forEach(ol => {
        let item
        if (ol.meta && ol.meta.isRoot) {
          item = ol
          list.push(item)
        }
      })
      return list
    }
  },
  methods: {
    changeRoot(idx) {
      this.$store.dispatch('app/changeAcIdx', idx + 1).then(() => {
        this.$router.push(this.rootRoutes[idx].redirect)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.root-router-vw{
    height: 100%;
    float: left;
    padding: 0 20px;
    display: flex;
    align-items: center;

    .name-vw{
      color: #fff;
      padding: 0 10px;
      font-size: 14px;
      height: 35px;
      line-height: 35px;
      cursor: pointer;
    }

    .actived{
      border-bottom: 2px solid #fff;
    }
}
</style>
